<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
   	<link rel="stylesheet" href="css/style.css" />
   	<link rel="stylesheet" href="css/iconfont.css" />
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript" src="js/com.js"></script>
	<script type="text/javascript" src="js/vue.js"></script>
	<script src="js/detail.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="bg-idx">
	<div class="header">
		<a href="javascript:history.go(-1);" class="icon iconfont icon-fanhui"></a>
		<h3 class="title">商品详情</h3>
		<a class="icon iconfont2 icon-fenxiang"></a>
	</div>
	<div class="content" id="product">
		<div id="app">
			<div class="product-img">
				<img :src="good.img">
			</div>
			<div class="product-txt">
				<h3>{{good.name}}</h3>
				<h4>
					<span><b>¥{{good.price}}</b></span>
					<span>折扣：<b>{{good.discount}}折</b></span>
					<a>数量：{{good.num}}</a>
				</h4>
			</div>
			<div class="product-info">
				<div class="tab">
					<span class="active">宝贝详情</span>
					<span>宝贝评价</span>
					<span>常见问题</span>
				</div>
				<div class="box">
					<div class="box-xq">
						<p>{{good.desc}}</p>
						<div v-html="good.info"></div>
					</div>
					<div class="box-pj">
						<ul>
							<li v-for="item in comment">
								<h4>
									<img :src="item.userIcon">
									<span>{{item.userName}}</span>
									<i>{{item.time}}</i>
								</h4>
								<p>{{item.info}}</p>
							</li>
							<!-- <li>
								<h4>
									<img src="img/qq.jpg">
									<span>中原一点红</span>
									<i>2017-12-21 12:23:30</i>
								</h4>
								<p>这个商品很不错哦！嗯！这个商品很不错哦！嗯！这个商品很不错哦！嗯！这个商品很不错哦！嗯！</p>
							</li>
							-->
						</ul>
						<p>
							<a href="detail-comment.html">查看更多评论 <span>></span></a>
						</p>
					</div>
					<div class="box-wt">
						<p>这个商品太棒了！一点问题没有，赶紧买吧！</p>
					</div>
				</div>
			</div>
			<div class="product-bot">
				<div>
					<i class="iconfont icon-kefu"></i>
					<h4>客服</h4>
				</div>
				<template v-if="isActive">
					<div class="active" @click="addLove($event)">
						<i  class="iconfont icon-love"></i>
						<h4>收藏</h4>
					</div>
				</template>
				<template v-else>
					<div @click="addLove($event)">
						<i  class="iconfont icon-love"></i>
						<h4>收藏</h4>
					</div>
				</template>
				<a  @click="addCar(good)" class="btn-shop">加入购物车</a>
				<a href="" class="btn-buy">立即购买</a>
			</div>
		</div>	
	</div>
</body>
</html>